<template>
  <tipTitle :msg="data.name" />
  <div class="height" style="height: 5px"></div>
  <div class="active_card">
    <div class="active_card_left">
      <div class="active_card_tip">
        <img :src="invoke_num" />
        <div class="active_card_tip_txt">已调用次数</div>
        <div class="active_card_cont">{{ data.invoke_count }}</div>
      </div>
      <div class="active_card_tip">
        <img :src="status" />
        <div class="active_card_tip_txt">函数状态</div>
        <div class="active_card_cont">
          {{ data.status == 1 ? "Ready" : "Not Ready" }}
        </div>
      </div>
      <div class="active_card_tip">
        <img :src="run_time" />
        <div class="active_card_tip_txt">已运行时间</div>
        <div class="active_card_cont">{{ getGap }}</div>
      </div>
    </div>
    <div class="active_card_right">
      <div class="active_card_tip">
        <div class="active_card_tip_txt">镜像</div>
        <div class="active_card_cont">{{ data.images }}</div>
      </div>
      <div class="active_card_tip">
        <div class="active_card_tip_txt">URL</div>
        <div class="active_card_cont need-copy">{{ data.url }}</div>
        <copy :msg="data.url" />
      </div>
      <div class="active_card_tip">
        <div class="active_card_tip_txt">函数调用</div>
        <div class="active_card_cont">{{ data.invoke }}</div>
        <div class="copy copyBtn" @click="updateFunc(data.name)">
          {{ updating ? "更新中…" : "更新函数" }}
        </div>
        <copy :msg="data.invoke" />
      </div>
    </div>
  </div>
</template>

<script>
import tipTitleVue from "./tipTitle.vue";
import copy from "./copy.vue";
import { dateDiff } from "../../util/format";
import { post } from "../../Middleware/mid_request";
export default {
  name: "activeCard",
  methods: {
    updateFunc: function (name) {
      this.$data.updating = 1;
      post({
        url: "/update_function",
        data: {
          name: name,
        },
        success: (res) => {
          this.$data.updating = 0;
        },
      });
    },
  },
  data: function () {
    return {
      updating: 0,
      invoke_num: require("../../assets/invoke_nums.svg"),
      run_time: require("../../assets/run_time.svg"),
      status: require("../../assets/status.svg"),
    };
  },
  props: {
    msg: String,
    data: Object,
  },
  components: {
    tipTitle: tipTitleVue,
    copy,
  },
  computed: {
    getGap: function () {
      return dateDiff(this.data.run_time);
    },
  },
};
</script>

<style scoped>
.copy:hover {
  opacity: 0.5;
}
.copy {
  transition: 0.3s;
  font-size: 12px;
  cursor: pointer;
  color: rgb(148, 148, 148);
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  margin-left: 10px;
}
.active_card_left {
  width: 250px;
}
.active_card {
  display: flex;
  flex-wrap: wrap;
}
.active_card_tip {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.active_card_tip img {
  width: 22px;
  height: 22px;
  margin-right: 5px;
}
.active_card_tip_txt {
  font-size: 18px;
}
.active_card_cont {
  font-size: 18px;
  font-weight: bold;
  color: #3e7cf4;
  margin-left: 5px;
}
.total {
  font-size: 30px;
}
</style>